<template>
	<view class="prompt-page">
		<u-navbar title="提示词生成" :autoBack="true" bgColor="#ccc" :placeholder="true">
		</u-navbar>
		<view class="main-container">
			<u--form labelPosition="left" :model="model1" :rules="rules" ref="uForm">
				<u-form-item label="性别" prop="userInfo.sex" borderBottom @click="showSex = true; hideKeyboard()"
					ref="item1">
					<u--input v-model="model1.userInfo.sex" disabled disabledColor="#ffffff" placeholder="请选择性别"
						border="none"></u--input>
					<u-icon slot="right" name="arrow-right"></u-icon>
				</u-form-item>

				<u-form-item label="时辰" prop="userInfo.timeIndex" borderBottom
					@click="showTimeIndex = true; hideKeyboard()" ref="item2">
					<u--input v-model="model1.userInfo.timeIndex" disabled disabledColor="#ffffff" placeholder="请选择时辰"
						border="none"></u--input>
					<u-icon slot="right" name="arrow-right"></u-icon>
				</u-form-item>

				<u-form-item label="日历" prop="userInfo.type" borderBottom ref="item3">
					<u-radio-group v-model="model1.userInfo.type">
						<u-radio :customStyle="{marginRight: '16px'}" v-for="(item, index) in radiolist1" :key="index"
							:label="item.name" :name="item.value">
						</u-radio>
					</u-radio-group>
				</u-form-item>

				<u-form-item label="生日" prop="userInfo.birthday" borderBottom
					@click="showBirthday = true; hideKeyboard()" ref="item4">
					<u--input v-model="model1.userInfo.birthday" disabled disabledColor="#ffffff" placeholder="请选择生日"
						border="none"></u--input>
					<u-icon slot="right" name="arrow-right"></u-icon>
				</u-form-item>


			</u--form>

			<u-button type="primary" text="生成" customStyle="margin-top: 20px" @click="submit"></u-button>


			<u--textarea placeholder="提示词" customStyle="margin-top: 40px" v-model="promptStr" count></u--textarea>

			<u-button type="default" text="复制" customStyle="margin-top: 10px" @click="copy"></u-button>

		</view>
		<u-action-sheet :show="showSex" :actions="actions" title="请选择性别" @close="showSex = false" @select="sexSelect">
		</u-action-sheet>
		<u-action-sheet :show="showTimeIndex" :actions="actionsTimeIndex" title="请选择时辰" @close="showTimeIndex = false"
			@select="timeIndexSelect">
		</u-action-sheet>

		<u-datetime-picker :show="showBirthday" :value="birthday" mode="date" closeOnClickOverlay
			@confirm="birthdayConfirm" @cancel="birthdayClose" @close="birthdayClose"
			:minDate="-631180800000"></u-datetime-picker>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				model1: {
					userInfo: {
						timeIndex: 0,
						sex: '',
						type: 0,
						birthday: ''
					},
				},
				showSex: false,
				actions: [{
						name: '男',
					},
					{
						name: '女',
					},
				],
				showTimeIndex: false,
				actionsTimeIndex: [ // 
					{
						name: '子（晚-23:00~24:00）',
						value: 12
					},
					{
						name: '子（早-00:00~01:00）',
						value: 0						
					},
					{
						name: '丑（01:00~03:00）',
						value: 1
					},
					{
						name: '寅（03:00~05:00）',
						value: 2
					},
					{
						name: '卯（05:00~07:00）',
						value: 3
					},
					{
						name: '辰（07:00~09:00）',
						value: 4
					},
					{
						name: '巳（09:00~11:00）',
						value: 5
					},
					{
						name: '午（11:00~13:00）',
						value: 6
					},
					{
						name: '未（13:00~15:00）',
						value: 7
					},
					{
						name: '申（15:00~17:00）',
						value: 8
					},
					{
						name: '酉（17:00~19:00）',
						value: 9
					},
					{
						name: '戌（19:00~21:00）',
						value: 10
					},
					{
						name: '亥（21:00~23:00）',
						value: 11
					}
				],
				radiolist1: [{
						name: '阳历',
						value: 0,
						disabled: false
					},
					{
						name: '阴历',
						value: 1,
						disabled: false
					}
				],
				rules: {
					'userInfo.sex': {
						type: 'string',
						max: 1,
						required: true,
						message: '请选择男或女',
						trigger: ['blur', 'change']
					},
				},
				showBirthday: false,
				birthday: Number(new Date()),
				promptStr: ''
			};
		},
		onReady() {
			//如果需要兼容微信小程序，并且校验规则中含有方法等，只能通过setRules方法设置规则。
			this.$refs.uForm.setRules(this.rules)
		},
		methods: {
			sexSelect(e) {
				this.model1.userInfo.sex = e.name
				// this.$refs.uForm.validateField('userInfo.sex')
			},
			timeIndexSelect(e) {
				this.model1.userInfo.timeIndex = e.value
				// this.$refs.uForm.validateField('userInfo.timeIndex')
			},
			birthdayClose() {
				this.showBirthday = false
				// this.$refs.form1.validateField('userInfo.birthday')
			},
			birthdayConfirm(e) {
				this.showBirthday = false
				this.model1.userInfo.birthday = uni.$u.timeFormat(e.value, 'yyyy-mm-dd')
				// this.$refs.form1.validateField('userInfo.birthday')
			},
			async submit () {
				console.log(this.model1.userInfo);
				let zwds = uniCloud.importObject('zwds');
				let { data } = await zwds.init({
					...this.model1.userInfo
				})
				this.promptStr = data
				console.log('生成结果', this.promptStr);
			},
			copy () {
				uni.setClipboardData({
				data: this.promptStr,//要被复制的内容
				success:()=>{//复制成功的回调函数
				  uni.showToast({//提示
					title:'复制成功'
				  })
				}
			  });
			}
		}
	}
</script>

<style lang="scss" scoped>
	.prompt-page {
		width: 100%;
		height: 100vh;

		.main-container {
			width: 100%;
			padding: 40rpx;
			box-sizing: border-box;
		}
	}
</style>